page,.container{
	min-height: 100%;
}
%radiusShadow{
	border-radius: 10rpx;
	box-shadow: 0 0 5rpx rgba(0,0,0, 0.4);
	padding: 10rpx 15rpx;
	background-color: #FFFFFF;
	
}

.container{
	padding: 26rpx;
	background-color: #F8F8F8;
	.normalText{
		font-size: 30upx;
		color: #6b6b6b;
		padding-left: 0.5em;
	}
	.take{
		color: #f07e11;
		border: 1rpx solid #f07e11;
		font-size: 28upx;
		width: 40upx;
		text-align: center;
		display: inline-block;
	}
	.unUseful{
		background-image: url('../static/beenUse.png');
		background-size:100% 100%;
		background-repeat: no-repeat;
		color: #5a5a5a;
	}
	.useful{
		color: #ef8d04;
	}
	.giftList{
		@extend %radiusShadow;
		margin-top: 50rpx;
		position: relative;
		
		.oprate{
			height: 80rpx;
			@extend %flexVcenter;
			justify-content: flex-end;
			padding: 0 1em;
			
			.buyBtn{
				background: linear-gradient(to right ,#ea8a1a,#eca700);
				@include textCenter(40rpx);
				font-size: $uni-font-size-base;
				color: #fff;
				padding: 0 1em;
				border-radius: 20rpx;
			}
		}
		.giftItem{
			@extend %flexBetw;
			padding: 20rpx 0 30rpx;
			border-bottom:  1rpx solid $uni-border-color;
			.sattusBox{
				width: 120upx;
				height: 120upx;
				font-size: $uni-font-size-base;
				@extend %flexAlCenter;
			}
			.context{
				width:48%;
				.boldText{
					width: 440rpx;
					font-size: $uni-font-size-sm;
					font-weight: bold;
					@extend %textover;
				}
				.desc{
					width: 440rpx; 
					@include textVCenter(40rpx);
					@extend %textover;
					font-size: 20rpx;
					color: $uni-text-color-grey;
				}
			}
			.giftImg{
				// width: 100rpx;
				// height: 100rpx;
				width: 160upx;
				height: 160upx;
				border-radius: 8rpx;
			}
		}
		
		.freeBox{
			position: absolute;
			top: -25rpx;
			width: 100%;
			@extend %flexJucenter;
			.freeInner{
				background-color: #f56226;
				border-radius: 40rpx;
				color: #fff;
				margin: 0 auto;
				padding: 4rpx;
				@extend %flexVcenter;
				.freeTitle{
					font-size: $uni-font-size-sm;
					padding: 0 0.5em;
				}
				
				.freeText{
					@include textVCenter(40rpx);
					border-radius: 20rpx;
					background-color: #fff;
					font-size: $uni-font-size-base;
					color: #f93008;
					font-weight: bold;
					padding: 0 0.2em;
				}
			}
			
		}
	}
	.recommandBox{
		@extend %radiusShadow;
		padding: 0;
		
		.stores{
			white-space: nowrap;
			
			.recommansCon{
				display: flex;
				padding-bottom: 60rpx;
				
				.storePic{
					width: 200upx;
					height: 200upx;
					border-radius: 16rpx;
					margin: 0 8rpx;
				}
			}
		}
		.recomTitle{
			@extend %flexBetw;
			height: 50rpx;
			padding: 26rpx 28rpx;
			height: 80rpx;
			.title{
				font-size: $uni-font-size-base;
				font-weight: bold;
			}
			
			.showMore{
				font-size: 20rpx;
				color: #f07e11;
			}
		}
	}
	.storeInfo{
		@extend %radiusShadow;
      position: relative;
      .follow-shop{
        position: absolute;
        right: 10rpx;
        top: 10rpx;
        background: $themColor;
        color: $uni-text-color-inverse;
        font-size: 20rpx;
        padding: 5rpx 15rpx;
        z-index: 99;
        border-radius: 20rpx;
      }
		.storeImg{
			width: 100%;
			height: 330rpx;
			border-radius: 10rpx;
			
		}
		
		.storeTitle{
			@include textVCenter(50rpx);
			@extend %textover;
			font-size: $uni-font-size-base;
			font-weight: bold;
		}
		
		.rateInfo{
			@extend %flexVcenter;
			height: 33rpx;
			margin-bottom: 16rpx;
			font-size: $uni-font-size-sm;
			
			.commentCount{
				color: #f3c965;
				padding-left:1em ;
			}
			.adres{
				text-indent: 1em;
			}
		}
		
		.phoneInfo{
			@extend %flexVcenter;
			height: 90rpx;
			border-bottom: 1rpx solid $uni-border-color;
			font-size:17px;
		}
		
		.addressInfo{
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1rpx solid $uni-border-color;
			align-items: center;
		}
		
		.oprates{
			@extend %flexBetw;
			height: 60rpx;
		}
	}
}
